72<template>
	<view class="contentBoxR">
		<view class="titleR">柜体类型：</view>
		<view class="radioGroup">
			<view class="radio" 
						v-for="(item,index) in titleType" 
						:key="item"
						:class="{active : index === currentIndex}">
				<view class="checkBox"
							@click="checkClick(index)">
					<view class="check">
					</view>
				</view>
				<view class="types">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name:"AddRadio",
		props:{
			titleType:{
				type:Array, 
				default:['单选项一','单选项二']								
			}
		},
		data() {
			return {
				currentIndex:0
			}
		},

		methods: {
			checkClick(index){
				//修改选中样式
				//修改vuex数据modifyType
				this.currentIndex = index;
				const currentType = this.titleType[index];		
				uni.$emit('addTitle',currentType);
				
			}
		}
	}
</script>

<style scoped lang="less">
.contentBoxR {
	background:#F1F9FF;
	border-radius: 20rpx;
	// width: 790rpx;
	width: 27.44vw;
	margin: 0 auto;
	// margin-top: 30rpx;
	// margin-bottom: 30rpx;
	margin-top: 1.97vh;
	margin-bottom: 1.97vh;
	.titleR {
		color: #777777;
		font-size: 34rpx;
		padding:34rpx 0 34rpx 30rpx;
	}
}
.radioGroup {
	display: flex;
	flex-wrap:wrap;
}
.radio {
	display: flex;
	align-items: center;
	font-size: 36rpx;
	font-weight: 400;
	color: #777;
	margin:0 0 40rpx 60rpx;
}
.checkBox {
	width: 34rpx;
	height:34rpx;
	border-radius: 50%;
	border:1.2rpx solid #4F9AFF;
	display:flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	margin-right:30rpx ;
	border-color:#999;
}
.check {
	width:27rpx;
	height:27rpx;
	border-radius: 50%;
	background: linear-gradient(0deg, rgba(114, 180, 255, 0.8), rgba(73, 153, 235, 0.8), rgba(43, 125, 209, 0.8));
	box-shadow: 0px 0px 0.58rpx 0px rgba(27, 67, 140, 0.5);
	box-sizing: border-box;
	opacity: 0;
}
.active {
	color:#4F9AFF;
	.checkBox {
		border-color:#4F9AFF;
		.check {
			opacity:1
		}
	}
}
</style>

